<template>
  <div class="hello">
    <div v-for="(item, i) in list" :key="i" style="margin-bottom: 30px">
      <video :id="'myVideo' + item.id" class="video-js">
        <source :src="item.src" type="video/mp4" />
      </video>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [
        {
          src: require("../assets/2.Vue 项目实战 后台管理系统 - 002 - day1-02 项目介绍-技(Av202320344,P2).mp4"),
          id: 0,
          pic: require("../assets/17.jpg"),
        },
        {
          src: require("../assets/3.Vue 项目实战 后台管理系统 - 005 - day1-05 项目初始化-(Av202320344,P3).mp4"),
          id: 1,
          pic: require("../assets/5a7136fb3ea24.jpg"),
        },
        {
          src: require("../assets/4.Vue 项目实战 后台管理系统 - 006 - day1-06 项目初始化-(Av202320344,P4).mp4"),
          id: 2,
          pic: require("../assets/logo.png"),
        },
      ],
    };
  },
  mounted() {
    this.initVideo();
  },
  methods: {
    initVideo() {
      //初始化视频方法 循环列表获取每个视频的id
      this.list.map((item, i) => {
        let myPlayer = this.$video("myVideo" + item.id, {
          //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
          controls: true,
          //自动播放属性,muted:静音播放
          autoplay: false,
          // 静音
          muted: true,
          //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
          preload: "auto",
          //设置视频播放器的显示宽度（以像素为单位）
          width: "1000px",
          //设置视频播放器的显示高度（以像素为单位）
          height: "500px",
          //封面图
          poster: item.pic,
          // 播放速度
          playbackRates: [0.7, 1.0, 1.5, 2.0, 3.0, 4.0, 5.0],
        });
      });
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped></style>
